import type { Config } from 'tailwindcss'
export default <Partial<Config>>{
  theme: {
    extend: {
      screens: {
        '3xs': { max: '479px' },
        '2xs': { min: '480px', max: '639px' },
        small: { min: '640px', max: '959px' },
        medium: { min: '960px', max: '1279px' },
        large: { min: '1280px', max: '1439px' },
        xl: '1440px'
      },
      colors: {
        'c-grey-3xl': 'var(--c-grey-3xl)',
        'c-grey-2xl': 'var(--c-grey-2xl)',
        'c-grey-xl': 'var(--c-grey-xl)',
        'c-grey-large': 'var(--c-grey-large)',
        'c-grey-medium': 'var(--c-grey-medium)',
        'c-grey-small': 'var(--c-grey-small)',
        'c-grey-xs': 'var(--c-grey-xs)',
        'c-grey-2xs': 'var(--c-grey-2xs)',
        'c-white': 'var(--c-white)',
        'c-black': 'var(--c-black)',
        'c-bg-grey': 'var(--c-bg-grey)',
        'c-bg-grey-2x': 'var(--c-bg-grey-2x)',
        'c-accent-red-m': 'var(--c-accent-red-m)',
        'c-brand-sm-3xl': 'var(--c-brand-sm-3xl)'
      },
      boxShadow: {
        'dropdown-s': '0px 8px 28px rgba(27, 36, 44, 0.16)',
        'hover-m': '0px 4px 16px rgba(12, 16, 24, 0.12)',
        'popup-l': '0px 12px 100px rgba(27, 36, 44, 0.28)'
      },
      maxWidth: {
        'layout-xl-screen': '1424px',
        'layout-large-scren': '1128px',
        'layout-medium-screen': '623px',
        'layout-small-screen': '608px',
        'layout-2xs-screen': '448px',
        'layout-3xs-screen': '342px'
      },
      width: {
        'layout-xl-screen': '1424px',
        'layout-large-scren': '1128px',
        'layout-medium-screen': '623px',
        'layout-small-screen': '608px',
        'layout-2xs-screen': '448px',
        'layout-3xs-screen': '342px'
      },
      gridTemplateColumns: {
        'contact-info': '1fr 2.6fr'
      }
    }
  }
}
